import {Button, Form, Input, message} from "antd";
import styles from "@/views/Login/login.module.scss";
import {ETabItemKey} from "@/views/Login/index.tsx";
import md5 from '@/utils/md5.ts'
import useTime from "@/hooks/useTime.ts";
import { emailCode, reset } from '@/api/login.ts'
import {useState} from "react"
interface IForm {
    email: string
    code: string
    password: string
}
interface IProps {
    change: (key: ETabItemKey) => void
}
const ResetPassword = ({ change }: IProps) => {
    const [form] = Form.useForm()
    const [email, setEmail] = useState('')
    const { time, changeTime } = useTime()
    const onFinish = async (values: IForm) => {
        const { email, code, password } = values
        const data = { email, code, password: md5(password), mode: ETabItemKey.reset }
        const response = await reset(data)
        if(response.code === 200) {
            message.success('重置成功')
        } else {
            message.error(response.data.msg || '重置失败')
        }
        form.resetFields()
        setEmail('')
        change(ETabItemKey.password)
    }
    const emailChange = (e: { target: { value: string } }) => {
        setEmail(e.target.value)
    }
    const handleEmail = () => {
        if(email) {
            changeTime(60,  async () => {
                await emailCode({ email, mode: ETabItemKey.reset })
            })
        } else {
            message.error('请填写邮箱后发送验证码')
        }
    }
    return (
        <>
            <h1 style={{fontWeight: 700, marginBottom: '12px', color: '#FFF'}}>重置密码</h1>
            <div className={styles.info} style={{color: '#A1A1A1', marginBottom: '28px'}}>请输入您的邮箱重置密码</div>
            <Form form={form} onFinish={onFinish}>
                <Form.Item name='email'
                           label={<span style={{color: '#FFF', fontWeight: 'bold'}}>邮&nbsp;&nbsp;&nbsp;箱</span>}
                           rules={[{required: true, message: '请输入邮箱'}]}>
                    <Input onChange={emailChange} suffix={<span style={{ cursor: 'pointer' }} className={ time === 0 ? '' : styles.timeBtn } onClick={handleEmail}>{ time === 0 ? '获取验证码' : `${time}s后可重新获取`}</span>}/>
                </Form.Item>
                <Form.Item name='code' label={<span style={{color: '#FFF', fontWeight: 'bold'}}>验证码</span>}
                           rules={[{required: true, message: '请输入验证码'}]}>
                    <Input/>
                </Form.Item>
                <Form.Item name='password' label={<span style={{color: '#FFF', fontWeight: 'bold'}}>新密码</span>}
                           rules={[{required: true, message: '请输入新密码'}]}>
                    <Input.Password/>
                </Form.Item>
                <Form.Item>
                    <div style={{display: 'flex', justifyContent: 'end', alignItems: 'center'}}>
                        <div style={{color: '#006BE6'}}>
                            <span style={{cursor: 'pointer'}} onClick={() => change(ETabItemKey.email)}>邮箱登录？</span>
                        </div>
                    </div>
                </Form.Item>
                <Form.Item>
                    <Button style={{width: '100%'}} htmlType="submit" type='primary'>重置</Button>
                </Form.Item>
            </Form>
            <div style={{textAlign: 'center'}}>
                <span style={{color: '#FFF'}}>还没有账号?</span>
                <span style={{marginLeft: '10px', cursor: 'pointer', color: '#006BE6'}} onClick={() => change(ETabItemKey.register)}>创建账号</span>
            </div>
        </>
    )
}

export default ResetPassword